<template>
	<view class="feedback-detail">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="content-wrap">
			<view class="con">
				<view class="name">企业名称：</view>
				<view class="val">{{msgDetail.customername}}</view>
			</view>
			<view class="con">
				<view class="name">联系电话：</view>
				<view class="val">{{msgDetail.mobile}}</view>
			</view>
			<view class="con">
				<view class="name">状态：</view>
				<view class="val" :style="msgDetail.status==0?'color:#FA0808':msgDetail.status==1?'color:#FA7408':''">
					{{msgDetail.status==0?'未处理':msgDetail.status==1?'处理中':msgDetail.status==2?'已处理':''}}
				</view>
			</view>
			<view class="con">
				<view class="name">反馈时间：</view>
				<view class="val">{{msgDetail.committime}}</view>
			</view>
			<view class="quest-detail">
				<view class="name">问题描述或建议</view>
				<view class="val"> {{msgDetail.content}}</view>
			</view>
			<view class="img-wrap">
				<view class="name">上传照片</view>
				<view style="margin-top: 20rpx;" v-if="!msgDetail.sitephoto">
					无
				</view>
				<view class="img-flex">

					<image @click="lookPhoto(index)" v-for="(item,index) in msgDetail?.sitephoto?.split(',')"
						:key="index" :src="item" mode="">
					</image>
				</view>
			</view>
			<view class="btn-wrap" v-if="msgDetail.status!=2">
				<button @click="mask=true">去处理</button>
			</view>
		</view>
		<view class="mask" v-if="mask">
			<view class="bgc">
				<view class="status">
					<view class="name">状态</view>
					<view style="width: 490rpx;">
						<uni-data-select placeholder="选择状态" style="width: 90rpx;" v-model="queryParams.status"
							:localdata="statusList" :clear="true"></uni-data-select>
					</view>
				</view>
				<view class="remark">
					<view class="name">备注</view>
					<textarea id="" v-model="queryParams.dowithremark" cols="10" maxlength="-1" rows="3"></textarea>
				</view>
				<view class="btn">
					<button @click="submit">确认</button>
				</view>
			</view>
			<image @click="mask=false" src="../../static/error.png" mode=""></image>
		</view>

	</view>
</template>

<script setup>
	//background:#FFC9C9  #CBE2FE  #FEE3CB   color:#FA0808  #0874FA   #FA7408 三种状态
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index'
	import uploadFile from '../../request/uploadFile.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	import {
		nextTick,
		reactive,
		ref
	} from 'vue'
	let msgDetail = ref({})
	let statusList = ref([{
		text: '未处理',
		value: '0'
	}, {
		text: '处理中',
		value: '1'
	}, {
		text: '已处理',
		value: '2'
	}, ])
	onLoad((e) => {
		msgDetail.value = JSON.parse(e.msg)
		// msgDetail.value.sitephoto = msgDetail.value.sitephoto.split(',')
		// msgDetail.value.sitephoto.push(msgDetail.value.sitephoto[0])
		// msgDetail.value.sitephoto.push(msgDetail.value.sitephoto[0])
		// msgDetail.value.sitephoto.push(msgDetail.value.sitephoto[0])
		// msgDetail.value.sitephoto.push(msgDetail.value.sitephoto[0])
		// msgDetail.value.sitephoto.push(msgDetail.value.sitephoto[0])
		// msgDetail.value.sitephoto.push(msgDetail.value.sitephoto[0])
		// msgDetail.value.sitephoto = msgDetail.value.sitephoto.join(',')
		queryParams.id = msgDetail.value.id
	})
	let mask = ref(false)
	let adviceTypeList = ref([])
	let queryParams = reactive({

	})
	let name = "反馈详情"
	let submit = () => {

		if (!queryParams.status) {
			uni.showToast({
				icon: 'none',
				title: "请选择状态",

			})
			return
		}
		if (!queryParams.dowithremark) {
			uni.showToast({
				icon: 'none',
				title: "请填写备注内容",

			})
			return
		}
		http({
			url: '/feedback/dowithFeedBack',
			data: {
				...queryParams
			}
		}).then((res) => {
			if (res.code == 0) {
				uni.showToast({
					title: "操作成功",
					icon: 'success'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}

			// console.log(res, 'fsd');
		})
	}
	onShow(() => {

	})
	let lookPhoto = (index) => {
		let urls = msgDetail.value.sitephoto?.split(',')
		uni.previewImage({
			urls: urls,
			current: index
		})

	}
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			adviceTypeList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})
</script>

<style lang="scss" scoped>
	:deep(.uni-select__input-text) {
		font-size: 28rpx !important;
	}

	.feedback-detail {
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		.mask {
			background-color: rgba(0, 0, 0, .6);
			width: 100vw;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 999;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;


			.bgc {
				padding-top: 58rpx;
				width: 681rpx;
				height: 674rpx;
				background: #FFFFFF;
				border-radius: 21rpx;

				.btn {
					margin-top: 80rpx;

					button {
						margin: 0 auto;
						width: 271rpx;
						height: 78rpx;
						background: #0874FA;
						border-radius: 39rpx;

						font-weight: 500;
						font-size: 31rpx;
						color: #FFFFFF;
					}

				}

				.status {
					display: flex;
					align-items: center;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
					padding-left: 38rpx;

					.name {
						margin-right: 30rpx;
						font-weight: 400;
						font-size: 35rpx;
						color: #333333;

					}
				}

				.remark {
					display: flex;
					align-items: center;
					padding-left: 38rpx;

					.name {
						margin-right: 30rpx;
						align-self: flex-start;
						font-weight: 400;
						font-size: 35rpx;
						color: #333333;

					}

					textarea {
						width: 490rpx;
						height: 292rpx;
						background: #FFFFFF;
						border-radius: 7rpx;
						border: 1px solid #CCCCCC;
						padding: 5rpx 5rpx 10rpx 5rpx;
					}
				}
			}

			image {
				width: 72rpx;
				height: 72rpx;
				margin-top: 60rpx;
			}
		}

		.title-bgc {
			width: 750rpx;
			height: 160rpx;
			background: #0874FA;
		}

		.content-wrap {
			height: calc(100vh - 160rpx);
			// padding-bottom: 30rpx;
			overflow: auto;

			.btn-wrap {
				margin-top: 50rpx;
				margin-bottom: 30rpx;

				button {
					width: 672rpx;
					height: 88rpx;
					background: #0874FA;
					border-radius: 44rpx;
					line-height: 88rpx;
					font-weight: 500;
					font-size: 31rpx;
					color: #FFFFFF;
					margin: 0 auto;
				}
			}


			.img-wrap {
				padding-left: 30rpx;

				.name {

					font-weight: 500;
					font-size: 33rpx;
					color: #000000;

				}

				.img-flex {
					display: flex;
					flex-wrap: wrap;
					margin-top: 10rpx;
					padding-right: 30rpx;

					image:nth-of-type(3n+1) {
						margin-left: 0rpx !important;
					}

					image {
						border-radius: 15rpx;
						width: 210rpx;
						height: 210rpx;
						margin-left: 20rpx;
						margin-top: 20rpx;
					}
				}
			}

			.quest-detail {
				display: flex;
				flex-direction: column;
				padding-left: 30rpx;
				margin-top: 34rpx;
				margin-bottom: 20rpx;

				.name {

					font-weight: 500;
					font-size: 33rpx;
					color: #000000;

				}

				.val {
					margin-top: 25rpx;

					font-weight: 400;
					font-size: 31rpx;
					color: #333333;
					line-height: 50rpx;

				}
			}

			.con {
				display: flex;
				margin-top: 34rpx;
				padding-left: 30rpx;

				.name {

					font-weight: 500;
					font-size: 33rpx;
					color: #000000;

				}

				.val {

					font-weight: 400;
					font-size: 31rpx;
					color: #333333;

				}
			}

		}










	}
</style>